<template>
    <Head>
        <Title>Sign in</Title>
    </Head>
    <PageHeader title="登录" subtitle="Sign in" :image="`${$config.public.baseUrl}images/bg/home1/9.png`"/>
    <section class="account padding-top padding-bottom">
        <div class="container-fluid">
            <div class="account__wrapper" data-aos="fade-up" data-aos-duration="800">
                <div class="row g-4">
                    <div class="col-lg-12">
                        <div class="account__content">
                            <!-- account tittle -->
                            <div class="account__header">
                                <h3>Log in to your account</h3>
                                <p>Welcome back! Please enter your details.</p>
                            </div>
                            <!-- account form -->
                            <form action="#" class="account__form needs-validation" novalidate @submit.prevent="handleSubmit">
                                <div class="row g-4">
                                    <div class="col-lg-12">
                                        手机号：<div class="input-group">
                                            <input type="email" class="form-control" id="account-email"
                                                placeholder="Enter your phonenumber" v-model="form.username" required>
                                            <div class="valid-tooltip">
                                                This email is valid
                                            </div>
                                            <div class="invalid-tooltip">
                                                Please enter a valid email
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        密&nbsp;&nbsp;码：<div class="input-group">
                                            <input type="text" class="form-control showhide-pass" id="account-pass"
                                                placeholder="Enter your password" required v-model="form.password" >
                                                <!-- <div style="width: 120px;text-align: center;line-height: 58px;margin-right: 3px;color: cornflowerblue;" @click="getCode">获取验证码</div> -->
                                            <!-- <button type="button" id="btnToggle" class="toggle"><i id="eyeIcon"
                                                    class="fa fa-eye"></i></button> -->
                                            <div class="valid-tooltip">
                                                Looks good!
                                            </div>
                                            <div class="invalid-tooltip">
                                                Enter a strong password
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="account__form-passcheck">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" value="" id="terms-check">
                                        <label for="terms-check" class="form-check-label">
                                            Remember for 30 days
                                        </label>
                                    </div>
                                    <div class="account__form-forgotpass">
                                        <nuxt-link to="/forgot-password">Forgot Password?</nuxt-link>
                                    </div>
                                </div>

                                <button type="submit" class="trk-btn trk-btn--border trk-btn--secondary1 d-block mt-4" @click="longinSubmit">登录</button>
                            </form>
                            <!-- account social -->
                            <div class="account__social">
                                <a href="#" class="account__social-btn"><span><img src="/images/others/google.svg"
                                            alt="google icon"></span>
                                    Sign in with google
                                </a>
                            </div>

                            <div class="account__switch">
                                <p>Don't have an account? <nuxt-link to="/signup">注册</nuxt-link></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>

<script type="text/javascript">
import PageHeader from '@/components/partials/PageHeader.vue'
import { login } from "@/public/api/imageInfo.js"
import { useLayoutStore } from "~/stores/layout"
export default {
    scrollToTop: true,
    components: { PageHeader },
    data(){
        return {
            form:{}
        }
    },
    methods:{
        longinSubmit(){
            login(this.form).then((res)=>{
                // console.log(res)
                const layoutStore = useLayoutStore();
                layoutStore.setToken(res.token);
                this.$router.push('/')
                localStorage.setItem('token', res.token);
                // const token = layoutStore.token; // 直接访问
                // console.log("layoutStore.token",token)
                // 或
                // const token = layoutStore.getToken; // 通过 getter
                // console.log("getToken",token)
                // 清除 token
                // layoutStore.clearToken();
                // console.log("clearToken",token)
            })
            // console.log("99999")
        },
    }
}
</script>